<template>
    <div class="goods" v-if="item.selectSum">
        <div class="check">
            <input type="checkbox" v-model="checked" @change="change">
        </div>
        <div class="goodsImage">
            <img src="../../../../../assets//images/4.jpg" alt="" class="goodsPhoto">
        </div>
        <div class="intro">
            <div class="name">{{ item.name }}</div>
            <div class="price">￥{{ price }}</div>
        </div>
        <div class="button">
            <div class="minus_button" v-show="isShow">
                <MinusButton @click="minus"/>
            </div>
            <div class="num" v-show="isShow">
                <input type="text" v-model="item.selectSum">
            </div>
            <div class="add_button">
                <AddButton @click="add"/>
            </div>
        </div>
    </div>
  </template>
  
<script>
import { computed, ref, watch } from 'vue'
import AddButton from '../../Button/AddButton.vue'
import MinusButton from '../../Button/MinusButton.vue'

export default {
    name:'MarketGoods',
    components:{AddButton,MinusButton},
    props:['item'],
    setup(props,{emit}){
        
        let item = props.item
        let price = computed(()=>{return item.selectSum*item.price})
        let checked = computed({
            get(){
                return item.select_settle
            },
            set(value){
                checked = value
            }
        })
        
        //选择或不选当前商品
        function change(){
            if(checked){ 
                emit('checkToTrue',item.id)
            }else{
                emit('checkToFalse',item.id)
            }
        }

        //没物品只显示加号，不显示数字和减号
        let isShow = computed(()=>{
            if(item.selectSum>0){
                return true
            }
            return false
        })

        //按钮加
        function add(){
            emit('add',item.id)
        }

        //按钮减
        function minus(){
            emit('minus',item.id)
        }

        return {
            item,isShow,checked,price,add,minus,change
        }
    }
}
</script>
  
  <style scoped>
      .goods {
          height: 120px;
          width: 45%;
          margin-left: 17px;
          display: flex;
          position: relative;
          background-color: rgb(237, 224, 224);
          border-radius: 5px;
      }
      .goodsImage {
          width: 30%;
          margin: 10px;
      }
      .goodsPhoto {
          height: auto;
          width: 100%;
          border: 3px solid white;
      }
      .intro {
          margin: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }
      .add_button {
          position: absolute;
          bottom: 15px;
          right: 10px;
      }
      .minus_button {
          position: absolute;
          bottom: 15px;
          right: 70px;
      }
      .num input {
          position: absolute;
          bottom: 15px;
          right: 43px;
          border: none;
          width: 10px;
          background-color: transparent;
      }
      .check {
        position: relative;
        top:45%;
      }
  </style>